import React, { useState } from 'react'
import { Button, Input, Space, Swiper, Toast,CalendarPicker } from 'antd-mobile'
import { Tabs } from 'antd-mobile'
import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'

function Home() {
    const navigate=useNavigate();
    // const {start,end,date}=useSelector(state=>state.home)
    const [visible1, setVisible1] =useState(false)
  return (
    <div>
        {/* 轮播图 */}
      <div>
        <Swiper loop autoplay>
            <Swiper.Item>
                <img src="../public/i1_02.jpg" alt="" style={{width:"100%", height:"25vh"}}/>
            </Swiper.Item>
            <Swiper.Item>
                <img src="../public/i2_01.jpg" alt="" style={{width:"100%", height:"25vh"}}/>
            </Swiper.Item>
            <Swiper.Item>
                <img src="../public/i3_02.jpg" alt="" style={{width:"100%", height:"25vh"}}/>
            </Swiper.Item>
            <Swiper.Item>
                <img src="../public/i4_01.jpg" alt="" style={{width:"100%", height:"25vh"}}/>
            </Swiper.Item>
        </Swiper>
      </div>
      {/* Tab切换 */}
      <div>
        <Tabs>
          <Tabs.Tab title='机票' key='fruits'>
            <div style={{width:"80vw", padding:10,border:"1px solid #ccc"}}>
                <div style={{display:'flex', padding:10}}>
                    <Input placeholder='出发城市'></Input>
                    <Input placeholder='目的地城市'></Input>
                </div>
                <div style={{display:'flex', padding:10}}>
                    <Input placeholder='选择日期'
                    onClick={() => {
                        setVisible1(true)
                    }}
                    ></Input>
                    <CalendarPicker
                    visible={visible1}
                    selectionMode='single'
                    onClose={() => setVisible1(false)}
                    onMaskClick={() => setVisible1(false)}
                    />
                </div>
                <Button style={{width:"80vw"}} color='warning' onClick={()=>navigate('/chelist')}>查询</Button>
            </div>
          </Tabs.Tab>
          <Tabs.Tab title='国内火车' key='vegetables'>
            国内火车
          </Tabs.Tab>
          <Tabs.Tab title='汽车票' key='animals'>
            汽车票
          </Tabs.Tab>
        </Tabs>
      </div>
      {/* 数据渲染 */}
      <div>
        <h3>当地玩乐推荐</h3>
        <dl style={{display:"flex"}}>
            <dt style={{width:"80px", height:"80px",padding:5}}>
                <img src="../public/02.webp" alt="" style={{width:"80px", height:"80px"}}/>
            </dt>
            <dd style={{display:"flex", flexDirection:"column", justifyContent:"space-between", padding:5}}>
                <h3>但是苟富贵</h3>
                <p>2/13</p>
            </dd>
        </dl>

        <dl style={{display:"flex"}}>
            <dt style={{width:"80px", height:"80px",padding:5}}>
                <img src="../public/03.webp" alt="" style={{width:"80px", height:"80px"}}/>
            </dt>
            <dd style={{display:"flex", flexDirection:"column", justifyContent:"space-between", padding:5}}>
                <h3>哈第三方很过分哈哈</h3>
                <p>3/21</p>
            </dd>
        </dl>

        <dl style={{display:"flex"}}>
            <dt style={{width:"80px", height:"80px",padding:5}}>
                <img src="../public/005.webp" alt="" style={{width:"80px", height:"80px"}}/>
            </dt>
            <dd style={{display:"flex", flexDirection:"column", justifyContent:"space-between", padding:5}}>
                <h3>十多个符合规定</h3>
                <p>3/11</p>
            </dd>
        </dl>

        <dl style={{display:"flex"}}>
            <dt style={{width:"80px", height:"80px",padding:5}}>
                <img src="../public/06.webp" alt="" style={{width:"80px", height:"80px"}}/>
            </dt>
            <dd style={{display:"flex", flexDirection:"column", justifyContent:"space-between", padding:5}}>
                <h3>十多个房地产</h3>
                <p>4/11</p>
            </dd>
        </dl>

        <dl style={{display:"flex"}}>
            <dt style={{width:"80px", height:"80px",padding:5}}>
                <img src="../public/i4_01.jpg" alt="" style={{width:"80px", height:"80px"}}/>
            </dt>
            <dd style={{display:"flex", flexDirection:"column", justifyContent:"space-between", padding:5}}>
                <h3>十多个房地产</h3>
                <p>4/11</p>
            </dd>
        </dl>
      </div>
    </div>
  )
}

export default Home
